
<template>
  <div>
    <div class="followup_wrapper">
      <div class="tabs_table_panel">
        <div class="patient-info-table">
          <div class="tabs_panel">
            <div class="tabs_items active_current">通知</div>
          </div>
          <el-form
            ref="elForm"
            :model="formData"
            size="small"
            label-width="70px"
            label-position="left"
          >
            <el-row>
              <el-col :span="24" style="display: flex; align-items: flex-start">
                <!-- <span style="margin-right: 20px; font-size: 14px"
                    >检索条件</span
                  > -->
                <el-form-item label="时间范围">
                  <el-date-picker
                    v-model="date1"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    style="width: 230px; margin-right: 20px"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
                <el-form-item label="提醒类别" prop="templateId">
                  <el-select
                    v-model="formData.templateId"
                    placeholder="请选择提醒类别"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="item in templates"
                      :key="item.id"
                      :label="item.templateName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  @click="search"
                  class="distance"
                  >搜索</el-button
                >
                <el-button @click="reset" size="small" class="distance"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form>
          <div class="tabel_wrapper">
            <el-table border :data="tableData">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column width="80px" label="序号" align="center"
                ><template slot-scope="scope">
                  <div>
                    {{ scope.$index + (pageNum - 1) * pageSize + 1 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="createCaseTime"
                min-width="200px"
                label="创建病例时间"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                min-width="200px"
                label="通知时间"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="patientNumber"
                min-width="200px"
                label="患者编号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="patientName"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column label="性别" align="center">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.sex == "1"
                      ? "男"
                      : scope.row.sex == "2"
                      ? "女"
                      : scope.row.sex == "3"
                      ? "未知"
                      : ""
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="age"
                label="年龄"
                align="center"
              ></el-table-column>
              <el-table-column
                min-width="200px"
                label="提醒类别"
                align="center"
                style="cursor: pointer"
                ><template slot-scope="scope">
                  <span @click="paln_Dialog = true" style="cursor: pointer">{{
                    scope.row.templateName
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                min-width="350px"
                label="描述"
                align="center"
                style="cursor: pointer"
                ><template slot-scope="scope">
                  <span @click="paln_Dialog = true" style="cursor: pointer">{{
                    scope.row.templateDetails
                  }}</span>
                </template></el-table-column
              >
              <el-table-column
                prop="telephone"
                min-width="200px"
                label="联系方式"
                align="center"
              ></el-table-column>
              <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button type="text">查看病历</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="paging">
            <el-pagination
              background
              :current-page.sync="pageNum"
              :page-size="pageSize"
              :page-sizes="pageSizes"
              layout="total,prev, pager, next,sizes"
              :total="total"
              @size-change="changeSize"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="确认加入随访计划" :visible.sync="paln_Dialog" width="30%">
      <div style="text-align: center">
        尊敬的金丝楠您好！ 本院的咋爱爱是脑梗死的高危患者，符
        合金丝楠创建的脑梗死，请您确认是否将咋爱爱纳入脑梗死当中
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="webSocketDialog = false">取 消</el-button>
        <el-button @click="webSocketDialog = false">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import { findTemplateName, query } from "@/api/notice/notice-page";

export default {
  name: "notice-page",
  data() {
    return {
      formData: {
        templateId: "",
      },
      date1: ["", ""],
      templates: [],
      paln_Dialog: false,
      paln_Content: "",
      tableData: [], // 总数据
      total: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pageNum: 1, // 默认显示第几页
      pageSize: 10,
      pageSizes: [10, 20, 50],
    };
  },
  mounted() {
    this.initData();
    findTemplateName().then((res) => {
      if (res.code == 200) {
        this.templates = res.data;
      }
    });
  },
  methods: {
    changeSize(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initData();
    },
    changePage(page) {
      this.pageNum = page;
      this.initData();
    },
    checkDetails(id) {
      this.$router.push({
        path: "the_new_questionnaire_details",
        query: {
          questionnaireId: id,
        },
      });
    },
    search() {
      this.pageNum = 1;
      this.initData();
    },
    reset() {
      this.$refs.elForm.resetFields();
      this.date1 = ["", ""];
    },
    initData() {
      let params = {
        startTime: this.date1 == null ? "" : this.date1[0] ? this.date1[0] : "",
        endTime: this.date1 == null ? "" : this.date1[0] ? this.date1[1] : "",
        templateId: this.formData.templateId,
        pageSize: this.pageSize,
        pageNumber: this.pageNum,
      };
      query(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.tabs_panel {
  display: flex;
  margin-bottom: 30px;
  .tabs_items {
    font-size: 16px;
    font-weight: bold;
    color: #a1a8b3;
    margin-right: 40px;
    cursor: pointer;
    &.active_current {
      color: #32353b;
      span {
        color: #05afc8;
      }
    }
  }
}

.followup_wrapper {
  background: rgb(245, 246, 250);
  display: flex;
  display: -webkit-box;
  justify-content: space-between;
}
.tabs_table_panel {
  flex: 1;
  background: #fff;
}
.spacing {
  margin-left: 20px;
  width: 230px;
}
/**搜索栏输入框**/
.input_one {
  width: 230px;
}
.long {
  width: 150px;
  color: #000;
}
.distance {
  margin-left: 18px;
}

.patient-info-table {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
.paging {
  margin-top: 20px;
  margin-left: 9px;
  padding-bottom: 20px;
}
.tabel_wrapper {
  margin-top: 15px;
}
</style>
<style lang="scss">
.el-pager li {
  background: #ffffff;
  border: 1px solid #e4e7ed;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #05afc8;
}
.el-input__inner {
  color: #000;
}
</style>

